import { Balloon, Button, Switch } from '@alifd/next';
import { t } from '@lingui/macro';
import React, { useEffect, useState } from 'react';

const PopConfirmSwitch = (props) => {
  const {
    title = '确认修改？',
    cancelText = '取消',
    confirmText = '确认',
    onClick,
    value,
    show,
  } = props;

  const [data, setData] = useState();
  const [callBackValue, setCallBackValue] = useState(false);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    setData(value);
  }, [value]);

  const handleOnClick = (v) => {
    setVisible(true);
    setCallBackValue(v);
  };

  const onConfirm = () => {
    onClick(callBackValue);
    setVisible(false);
  };

  const onCancel = () => {
    setCallBackValue(false);
    setVisible(false);
  };

  if (!show) return <></>;

  return (
    <Balloon
      v2
      title={t`${title}`}
      trigger={<Switch checked={data} onChange={handleOnClick} />}
      closable={false}
      triggerType="click"
      visible={visible}
    >
      <Balloon
        trigger={
          <>
            <Button onClick={onCancel} warning>{t`${cancelText}`}</Button>
            <Button onClick={onConfirm} style={{ marginLeft: 5 }}>{t`${confirmText}`}</Button>
          </>
        }
      />
    </Balloon>
  );
};

export default PopConfirmSwitch;
